<template>
  <div id="shareWordList">
    <!-- 上部搜索条件 -->
    <topSearch
      v-if="authStatus"
      :form-inline="formInline"
      @toSearch="toSearch"
      :authStatus="authStatus"
    ></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="share-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="700"
      ref="table"
    >
      <el-table-column type="index" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.nickName">{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dpAccount" label="大鹏号" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.dpAccount">{{ scope.row.dpAccount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="验证手机号" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="liveTypeName" label="直播分类" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.liveTypeName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="真实姓名" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.realName">{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.idCard">{{ scope.row.idCard }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="idCardPic" label="证件照" width="420">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.idCardPic"
            fit="cover"
            style="width: 150px; height: 100px"
            :src="scope.row.idCardPic.split(',')[0]"
            :preview-src-list="scope.row.idCardPic.split(',')"
          >
          </el-image>
          <el-image
            v-if="scope.row.idCardPic"
            fit="cover"
            style="width: 150px; height: 100px; margin-left: 10px;"
            :src="scope.row.idCardPic.split(',')[1]"
            :preview-src-list="scope.row.idCardPic.split(',')"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status">{{
            filterName(scope.row.status, 'live_room_auth_type')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reviewedName" label="审核人" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.reviewedName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="提交时间"
        width="230"
      ></el-table-column>
      <el-table-column prop="reviewedTime" label="审核时间" width="230">
        <template slot-scope="scope">
          <span>{{ scope.row.reviewedTime || '-' }}</span>
        </template>
      </el-table-column>
      <!--此处不能添加fixed="right"，会导致导出表格数据重复-->
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 'AWAIT'"
            type="text"
            @click="authPass(scope.row.id)"
          >
            通过
          </el-button>
          <el-button
            v-if="scope.row.status === 'AWAIT'"
            type="text"
            @click="rejectAuth(scope.row.id)"
          >
            驳回
          </el-button>
          <el-button
            @click="viewRejectReason(scope.row)"
            v-if="scope.row.status === 'REJECT'"
            type="text"
          >
            查看驳回原因
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <el-dialog title="驳回申请" :visible.sync="dialogFormVisible">
      <el-form :model="authForm">
        <el-form-item label="驳回原因">
          <el-input
            type="textarea"
            maxlength="200"
            v-model="authForm.rejectMemo"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="驳回截图">
          <!-- <el-upload
            class="avatar-uploader"
            action="#"
            :file-list="fileList"
            :auto-upload="false"
            :on-remove="handleRemove"
            :on-change="changeUpload"
          >
            <el-image
              v-if="authForm.rejectPic"
              :src="authForm.rejectPic"
              class="avatar"
              fit="cover"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              注：上传图片小于1MB，最多上传三张
            </div>
          </el-upload> -->
          <uploadImgCom
            @setImgInfo="setImgInfo"
            :maxLength="3"
            :maxSize="1"
            :singleFile="3"
          ></uploadImgCom>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="putLivesVerfyingsReject"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      v-if="rejectReasonData"
      title="驳回理由"
      :visible.sync="rejectReasonVisible"
    >
      <el-form>
        <el-form-item label="驳回原因：">
          {{ rejectReasonData.rejectMemo }}
        </el-form-item>
        <el-form-item label="驳回截图：">
          <template v-if="rejectReasonData.rejectPic">
            <div
              style="display: inline-block;margin-left: 10px;"
              v-for="(item, index) in rejectReasonData.rejectPic.split(',')"
              :key="index"
            >
              <el-image
                style="width: 100px; height: 100px"
                :src="item"
                class="avatar"
                fit="cover"
                :preview-src-list="rejectReasonData.rejectPic.split(',')"
              />
            </div>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectReasonVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import topSearch from './topSearch' // 上部搜索条件
import { uploadImg } from '@/api/common/img' // 接口
import { saveScrollMixins } from '@/mixins/saveScroll'
import uploadImgCom from '@common/uploadImg' // 上传图片公共组件
import {
  putLivesVerfyingsReject,
  getLivesVerifyings,
  putLivesVerfyings
} from '@/api/anchor/anchor-auth'
export default {
  name: 'anchorAuthManage',
  msg: '主播认证管理-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    uploadImgCom
  },
  data() {
    return {
      rejectReasonData: null,
      rejectReasonVisible: false,
      fileList: [],
      authForm: {
        rejectMemo: '',
        rejectPic: '',
        id: ''
      },
      dialogFormVisible: false,
      loading: true,
      total: 0,
      // 搜索条件
      formInline: {
        reviewedBy: '',
        dpAccount: '', // 大鹏号
        type: '', // 用户类型,默认全部
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给新增弹框的数据
      addDialogData: {
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '创建分享语管理',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      // 选择框选中的数据
      multipleSelection: [],
      // 认证状态列表
      authStatus: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
    this.getStatusList()
  },
  methods: {
    setImgInfo(values) {
      this.fileList = []
      values.forEach((ele) => {
        this.fileList.push(ele.url)
      })
    },
    viewRejectReason(row) {
      this.rejectReasonData = row
      this.rejectReasonVisible = true
    },
    /* 字典英文转汉字 */
    filterName(id, name) {
      let obj = this.$store.state['valueTokey'][name]
      if (id && obj && obj[id]) {
        return obj[id].name
      }
      return ''
    },
    /* 获取字典状态 */
    async getStatusList() {
      //审核状态列表
      let data = await sysNormalDisable(
        'live_room_auth_type',
        'live_room_auth_type'
      )
      this.authStatus = data
    },
    // 驳回主播认证
    putLivesVerfyingsReject() {
      if (!this.authForm.rejectMemo.trim()) {
        this.$message({
          message: '请输入驳回原因',
          type: 'warning'
        })
        return false
      }
      // if (this.fileList.length === 0) {
      //   this.$message({
      //     message: '请上传驳回截图',
      //     type: 'warning'
      //   })
      //   return false
      // }
      this.authForm.rejectPic = this.fileList.join(',')
      putLivesVerfyingsReject(
        this.authForm,
        (res) => {
          this.dialogFormVisible = false
          this.searchList()
        },
        (res) => {
          console.log(res)
        }
      )
    },
    // 审核驳回弹窗显示
    rejectAuth(id) {
      this.authForm.id = id
      this.dialogFormVisible = true
    },
    // 审核通过
    authPass(id) {
      this.$confirm(`<span>是否确认该用户通过直播申请？</span>`, '通过申请', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          putLivesVerfyings(
            { id },
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign(
        { auditStatus: this.formInline.type },
        this.searchParams,
        this.formInline
      )
      delete obj.createTime
      let params = obj
      getLivesVerifyings(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 新增后，刷新列表 */
    refresh() {
      this.formInline = {
        reviewedBy: '',
        type: '',
        startTime: '',
        endTime: '',
        dpAccount: ''
      }
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#shareWordList {
  .el-table {
    margin-top: 20px;
  }
}
</style>
